<template>
	<view>
		<u-navbar back-icon-color="#fff" title-color="#fff" title="练习详情" :border-bottom="false">
		</u-navbar>
		<my-empty v-if="empyFalse" emptyTit="暂无练习记录"></my-empty>
		<view class="detailCon">
			<view class="detailList" v-for="(item, index) in list">
				<view class="listTit">{{ item.subName }}</view>
				<view class="listNode">
					<view>最近练习：{{ item.chapterName }}</view>
					<text>{{ item.createTime }}</text>
				</view>
				<view class="datailBot">
					<view class="detailView">
						<my-icon name="jindu"></my-icon>
						<text>
							进度：
							<text class="bold">{{ item.process }}</text>
						</text>
					</view>
					<view class="detailView">
						<my-icon name="zhangjie"></my-icon>
						<text>
							练习章节：
							<text class="bold">{{ item.chapters }}</text>
						</text>
					</view>
					<view class="detailView">
						<my-icon name="datishu"></my-icon>
						<text>
							答题数：
							<text class="bold">{{ item.ques }}</text>
						</text>
					</view>
					<view class="detailView">
						<my-icon name="zhengqueshuai"></my-icon>
						<text>
							正确率：
							<text class="bold">{{ item.rightRank }}</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [], //列表
			userid: '',
			empyFalse: false
		};
	},
	onLoad(option) {
		this.userid = option.userId;
		this.init();
	},
	methods: {
		init() {
			this.list = [];
			return this.getStudent();
		},
		getStudent() {
			const userid = this.userid;
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/teacher/home/getExerciseDetail/' + userid)
					.then(res => {
						this.list = res;
						this.empyFalse = this.list.length > 0 ? false : true;
						resolve();
					})
					.catch(reject);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.detailList {
	width: 690upx;
	height: 323upx;
	margin: 30upx auto 0;
	background: #fff;
	border-radius: 18upx;
	box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
	padding: 45upx 39upx 45upx;
	.listTit {
		font-size: 32upx;
		line-height: 32upx;
		color: #363940;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.listNode {
		color: #a6a6a6;
		font-size: 26upx;
		line-height: 26upx;
		display: flex;
		justify-content: space-between;
		height: 30upx;
		line-height: 30upx;
		margin: 27upx 0 47upx;
		view {
			width: 389upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;	
		}
		text {
			display: block;
			text-align: right;
			max-width: 235upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
.datailBot {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	.detailView{
		width: 50%;
		height: 34upx;
		display: flex;
		justify-content: start;
		align-items: center;
		margin-bottom: 33upx;
		.iconfont {
			font-size: 32upx;
			width: 34upx;
			color: transparent;
			margin-right: 19upx;
			margin-bottom: 0;
		}
    .icon-jindu {
	    background: linear-gradient(to bottom, #ffd46c, #f99d2e);
	    -webkit-background-clip: text;
     }
		.icon-zhangjie {
			background: linear-gradient(to bottom, #8cb6fe, #5584ff);
			-webkit-background-clip: text;
		}
		.icon-datishu {
			background: linear-gradient(to bottom, #ae9fff, #8f67ff);
			-webkit-background-clip: text;
			color: transparent;
		}
		.icon-zhengqueshuai {
			background: linear-gradient(to bottom, #ff8e80, #eb5141);
			-webkit-background-clip: text;
		}
		text {
			color: #6b7180;
			font-size: 30upx;
			line-height: 30upx;
		}
		.bold {
			color: #363940;
			font-weight: 500;
		}
	}
}
</style>
